import React from 'react';
import { Image, List } from 'antd-mobile'
import { useNavigate } from 'react-router';
const ProList = ({proList}) => {

  // console.log(proList);
  const navigate = useNavigate()
  // console.log(navigate);
  return (
    <List header='商品列表'>
    {proList.map(item => (
      <List.Item
        key={item.proid}
        prefix={
          <Image
            src={item.img1}
            fit='cover'
            width={80}
            height={80}
          />
        }
        onClick={()=>{
          // console.log('被点击了',  item.proid);
          // 如果需要通过URL 拼接的方式传递参数，一定要先在路由配置中加上规则
          navigate('/detail/' + item.proid, {
            state: {
              proid: item.proid,
              name: '高举',
              age: 18,
              sex: '女'
            }
          })
        }}
      >
        <p style={{fontSize: 14}}>{item.proname}</p>
      </List.Item>
    ))}
  </List>
  );
};

export default ProList;
